/*
* @Author: zhangsai
* @Date: 2018/4/3
* @description:  登录
*/
<template>
  <div>
    <div id="particles-background" class="background-canvas"></div>
    <div class="login">
      <h3 class="align-center cms-login-title font-size-16 m-b-20">cms管理系统</h3>
      <el-form :model="form" :rules="rules" ref="loginForm" label-width="130px">
        <el-form-item prop="username" label="用户名">
          <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button :loading="loading" type="primary" @click="onSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import BaseService from '../../service/common';
import { particles } from '../../libs/utils';
import { TAB_MENU_LIST, TAB_MENU_CURR_INDEX } from '../../store/user'; 
interface LoginForm {
  username: string;
  password: string;
  grant_type: string;
}
@Component({
  components: {
  }
})
export default class Login extends Vue {
  // 初始化数据 相当于data
  public form: LoginForm = {
    username: '',
    password: '',
    grant_type: 'password'
  };
  // 验证规则
  public rules = {
    username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
    password: [ { required: true, message: '请输入密码', trigger: 'blur' } ],
  };
  public loading: boolean = false;
  // refs
  public $refs: {
    loginForm: HTMLFormElement
  };

  // 生命周期钩子
  public mounted() {
    particles();
    document.addEventListener('keyup', (event: {keyCode: number}) => {
        if (event && event.keyCode === 13) { // enter 键
          this.onSubmit();
        }
    });
  }
 
  // 方法
  public onSubmit() {
    this.$refs.loginForm.validate(async (valid: boolean) => {
      if (valid) {
        this.loading = true;
        const res: {access_token?: string | undefined; uid?: string | undefined} = await BaseService.login(this.form);
        if (res.access_token) {
          await this.$store.dispatch('signIn', {token: res.access_token});
          const dictionary = await BaseService.getDictionaries();
          const menuList = await BaseService.getSysMenuTree();
          const store = {
            uid: res.uid,
            token: res.access_token,
            dictionary,
            menuList
          };
          await this.$store.dispatch('signIn', store);
          this.loading = false;
          localStorage.setItem(TAB_MENU_LIST, JSON.stringify([{name: '我的主页', url: 'home-index'}]));
          localStorage.setItem(TAB_MENU_CURR_INDEX, '0');
          this.$router.push({ name: 'home-index' });
        }
        this.loading = false;
      }
    });
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    width:500px;
    min-height:280px;
    margin:10% auto;
    border:1px solid #ededed;
    box-shadow: 0 2px 4px  rgba(0,0,0,.2);
    padding:50px 50px 50px 0;
    background:#f9f9f9;
    position: relative;
    z-index:2;
  }
  .background-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .cms-login-title{
    color:#666;
    font-size:19px;
    font-family: SimHei;
  }

</style>
